<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动态组件与v-once指令</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 动态组件component，通过:is="属性名"切换队形组件 -->
    <!-- <component :is="type"></component> -->
    <child-one v-if="type === 'child-one'"></child-one>
    <child-two v-if="type === 'child-two'"></child-two>
    <!-- 点击change 实现child-one和child-two的切换 -->
    <button @click="btnClick">change</button>
  </div>

  <script>
    Vue.component("child-one", {
      template: '<div v-once>child-one</div>'
    })
    Vue.component("child-two", {
      template: '<div v-once>child-two</div>'
    })
    var vm = new Vue({
      el: "#root",
      data: function() {
        return {
          type: "child-one"
        }
      },
      methods: {
        btnClick: function() {
          this.type = this.type === "child-one" ? "child-two" : "child-one";
        }
      }
    })
  </script>
</body>

</html>